<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script>
		
		<style type="text/css">
			.ok {
				color: green;
			}

			.error {
				color: red;
			}
		</style>
		<script type="text/javascript">
			function checkName() {
				var name = document.getElementById("nameID").value;
				var reg = /^\w{5,10}$/;
				if (reg.test(name)) {
					nameMsgId.className = "ok";
				} else {
					$("#nameMsgId").html("5-10位字母、数字、下划线");
					nameMsgId.className = "error";
//  					$("#nameExistId").empty();
					return;
				}
				
				$.post(
					"/JavaWeb1907/student?method=checkName",
					{"name" : name},
					function(jsonObject){
						if(jsonObject.isExist) {
							$("#nameMsgId").html("该用户名已存在");
							nameMsgId.className = "error";
						} else {
							$("#nameMsgId").html("该用户名可以使用");
						}
					},
					"json"
				)
			}
			function checkEmail(){
				var email = document.getElementById("emailName").value;
				var reg = /\w+@\w+(\.\w+)+/;
				if (reg.test(email)) {
					emailMsgId.className = "ok";
				} else {
					emailMsgId.className = "error";
				}
			} 
		</script>
	</head>
	<body>
		<span>名字：</span>
		<input type="text" id="nameID" onblur="checkName()">
		<span id="nameMsgId">5-10位字母、数字、下划线</span><br /> 
<!-- 		<span id="nameExistId"></span> -->
		<span>邮箱：</span>
		<input type="password" id="emailName" onblur="checkEmail()">
		<span id="emailMsgId">必须符合邮箱的格式</span>
	</body>
</html>
